<template>
  <div class="attendance-manage">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考勤管理</span>
          <div>
            <el-input
              v-model="employeeId"
              placeholder="输入员工ID"
              style="width: 150px; margin-right: 10px;"
            />
            <el-button type="primary" @click="handleSearch">根据id查询当天记录</el-button>
            <el-button type="success" @click="fetchAllRecords">查看所有记录</el-button>
          </div>
        </div>
      </template>
      <el-table :data="attendanceList" border style="width: 100%">
        <el-table-column prop="attendanceId" label="记录ID" width="100" />
        <el-table-column prop="empId" label="员工ID" width="120" />
        <el-table-column prop="attendanceDate" label="日期" width="120" />
        <el-table-column prop="checkInTime" label="上班打卡" width="150" />
        <el-table-column prop="checkOutTime" label="下班打卡" width="150" />
        <el-table-column prop="attendanceStatus" label="状态" width="120">
          <template #default="{ row }">
            <el-tag
              :type="row.attendanceStatus === 0 ? 'success' : row.attendanceStatus === 1 ? 'warning' : row.attendanceStatus === 2 ? 'info' : row.attendanceStatus === 3 ? 'danger' : row.attendanceStatus === 4 ? 'primary' : row.attendanceStatus === 5 ? 'default' : 'default'"
            >
              {{ row.attendanceStatus === 0 ? '正常' : row.attendanceStatus === 1 ? '迟到' : row.attendanceStatus === 2 ? '早退' : row.attendanceStatus === 3 ? '旷工' : row.attendanceStatus === 4 ? '请假' : row.attendanceStatus === 5 ? '外勤' : '未知' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/utils/axios";

const employeeId = ref("");
const attendanceList = ref([]);

const handleSearch = async () => {
  if (!employeeId.value) {
    ElMessage.warning("请输入员工ID");
    return;
  }

  try {
    const response = await axios.get(`/attendance/today/${employeeId.value}`);
    console.log("API Response:", response.data); // 调试日志

    if (response.data && response.data.code === 200) {
      if (response.data.data && typeof response.data.data === "object") {
        const record = response.data.data;
        // 为 attendanceStatus 添加默认值
        record.attendanceStatus = record.attendanceStatus ?? -1; // -1 表示未知状态
        attendanceList.value = [record];
        ElMessage.success("查询成功");
      } else {
        console.warn("No attendance record found for employee:", employeeId.value);
        attendanceList.value = [];
        ElMessage.info("未找到该员工的考勤记录");
      }
    } else {
      ElMessage.error(response.data?.message || "查询失败");
    }
  } catch (error) {
    console.error("Error fetching attendance records:", error);
    ElMessage.error(error.message || "查询失败");
  }
};

const fetchAllRecords = async () => {
  try {
    const response = await axios.post("/attendance/records", null, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
    console.log("API Response:", response.data); // 调试日志

    if (response.data && Array.isArray(response.data.data)) {
      attendanceList.value = response.data.data;
    } else {
      console.error("Invalid data format: Expected an array in response.data.data.", response.data);
      attendanceList.value = [];
    }

    ElMessage.success("已加载所有考勤记录");
  } catch (error) {
    console.error("Error fetching attendance records:", error);
    ElMessage.error(error.message || "加载考勤记录失败");
  }
};
</script>

<style scoped>
.attendance-manage {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>